@import "../../../core/variables";
@import "../../../core/function";

.personal-info-wrapper {
    width: @pc-nav-left-width;
    position: fixed;
    height: @pc-nav-height;
    display: flex;
    flex-direction: column;
    z-index: 1;
    //@media (max-width: @max2) {
    //    position: relative;
    //}
    .personal-info-avatar-wrapper {
        background-color: #FFFFFF;
        margin-bottom: 20/@remScale;
        border-radius: @left-right-radius;
        overflow: hidden;
        position: relative;
        .avatar-image {
            width: 100%;
            vertical-align: middle;
        }
        .change-avatar-btn {
            position: absolute;
            display: none;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40/@remScale;
            color: @white;
            font-size: 14/@remScale;
            text-align: center;
            cursor: pointer;
            line-height: 40/@remScale;
            background: rgba(0, 0, 0, 0.6);
            &:hover {
                background: rgba(0, 0, 0, 0.8);
            }
            .upload-input {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 40/@remScale;
                opacity: 0;
                cursor: pointer;
            }
        }
        &:hover {
            .change-avatar-btn {
                display: block;
            }
        }
    }
    .personal-info-list-wrapper {
        flex: 1;
        background-color: #FFFFFF;
        border-radius: @left-right-radius;
        display: flex;
        overflow: hidden;
        flex-direction: column;
        .boxShadow();
        .list-flex-top {
            flex: 1;
            overflow-y: auto;
            &::-webkit-scrollbar {
                width: 5/@remScale;
            }
            &::-webkit-scrollbar-thumb {
                background-color: #A6A6A6;
                border-left: 2/@remScale solid transparent;
            }
            &::-webkit-scrollbar-track {
                background-color: #E5E5E5;
                border-left: 2/@remScale solid transparent;
            }
            .cut-line {
                width: 100%;
                height: 1/@remScale;
                background: #eeeeee;
                margin: 26/@remScale 0;
            }
            .current-account {
                border-bottom: 1/@remScale solid #eeeeee;
                height: 50/@remScale;
                line-height: 50/@remScale;
                padding: 0 20/@remScale;
                color: @black-three;
                font-size: 16/@remScale;
                cursor: pointer;
                position: relative;
            }
        }
        .personal-info-item-wrapper {
            height: 50/@remScale;
            line-height: 48/@remScale;
            cursor: pointer;
            position: relative;
            &:after {
                content: '';
                position: absolute;
                left: 50%;
                bottom: 0;
                transform: translateX(-50%);
                width: 90%;
                height: 1/@remScale;
                background: #eeeeee;
            }
            &:last-child {
                &:after {
                    display: none;
                }
            }
            &.exit {
                &:after {
                    display: none;
                }
                border-top: 1/@remScale solid #eeeeee;
                .item-title {
                    color: #cccccc;
                }
            }
            .item-active-line {
                height: 60%;
                width: 3/@remScale;
                background-color: @light-blue-color;
                display: inline-block;
                vertical-align: middle;
                opacity: 0;
                &.active {
                    opacity: 1;
                }
            }
            .item-title {
                display: inline-block;
                font-size: 14/@remScale;
                color: @black-auxiliary;
                vertical-align: middle;
                margin-left: 20/@remScale;
                .icon {
                    width: 18/@remScale;
                    height: 18/@remScale;
                }
                .text {
                    margin-left: 12/@remScale;
                }
                &.active {
                    color: @light-blue-color;
                    font-weight: bold;
                }
            }
            &:hover {
                background: rgba(29, 176, 231, 0.1);
                .item-title {
                    color: @light-blue-color;
                    font-weight: bold;
                }
                .item-active-line {
                    opacity: 1;
                }
            }
        }
        .list-flex-bottom {

        }
    }

}

